<template>
    <div id="app">
        <van-nav-bar
            title="今日头条 · 登录"
            left-text="返回"
            left-arrow
        />

        <van-form @submit="onSubmit">
            <van-field
                v-model="user.mobile"
                name="mobile"
                label="手机号"
                placeholder="输入手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
                required
            />
            <van-field
                v-model="user.code"
                type="password"
                name="code"
                label="验证码"
                placeholder="输入验证码"
                :rules="[{ required: true, message: '请填写验证码' }]"
                required
            />
            <div style="margin: 16px;">
                <van-button 
                    round 
                    block 
                    type="info" 
                    native-type="submit"
                    :loading="isloading"
                    loading-text="正在登录"
                    :disable="isloading"
                    >
                    <!-- loading应该是一个动态变量，根据不同要求看是否登录还是禁用登录
                    disable是按钮禁用设置，
                    -->
                    登录
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    import {LoginAPI} from '@/api'
    import { Notify } from 'vant';
    import {setToken} from '@/utils/token.js'
    export default {
        data() {
            return {
                isloading:false,
                user:{
                    mobile: '17704449361',
                    code: '246810',
                }
            };
        },
        methods: {
            async onSubmit(values) {
                this.isloading = true;//一点击按钮就禁用登录按钮，多次点击无效
                console.log('submit', values);
                // 提交之后请求接口，请求之前，先封装接口
                try{
                    const {data:res} = await LoginAPI(this.user);
                    // console.log(res);
                    //登录后，data里有一个前后端交互的token令牌，遇到token,需要获取
                    // token有存储，获取，删除，3种操作
                    setToken(res.data.token);
                    // 登录成功给用户一个提示
                    Notify({ type: 'success', message: '登录成功' });
                    this.$router.replace({
                        path:'/layout/home'
                    })
                }catch(err){
                    console.log(err);
                    Notify({ type: 'danger', message: '账号或密码有误' });
                }
                // 用try catch代替if else
                this.isloading = false;//请求和反馈结束后，无论登陆成功还是失败最后取消按钮禁用
            },
            
        },
    }
</script>

<style scoped>
    .van-nav-bar{
        background: blue;
    }

    /deep/ .van-nav-bar__title {
        color:white;
        /* 一般提升样式选择可选 !important，但此处是标签内部的一个子集的样式,所以子集前加 /deep/ */
    }
</style>